<script setup>
import { Search, Refresh, Delete, FolderAdd, Edit, Menu, House } from '@element-plus/icons-vue';
import { useMenuStore } from '@/stores'
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';
const menuStore = useMenuStore()
const { menus, menuSearch, updateDialogVisible, menuFrom, menuDialogVisible, menuIcons } = storeToRefs(menuStore)
const { getMenus, save, deleteMenu, refresh, deleteMenus, EditMenu, handleSelectionChange, addChildrenMenu } = menuStore
onMounted(() => {
    getMenus()
})
</script>
<template>
    <!-- 功能部分 -->
    <div style="display: flex; flex-direction: column; margin: 10px 0 0 20px;">
        <div style="margin: 0 0 10px 0;display: inline;">
            <el-input v-model="menuSearch.name" style="width: 200px; margin: 0 15px 0 0 ;" placeholder="菜单名称"
                :suffix-icon="Search"></el-input>
            <el-button style="margin: 0 15px 0 0;" type="primary" @click="getMenus()">搜索<el-icon>
                    <Search />
                </el-icon></el-button>
            <el-button style="margin: 0 15px 0 0 ;" type="primary" @click="refresh()">重置<el-icon>
                    <Refresh />
                </el-icon></el-button>
            <el-button style="margin: 0 5px 0 0 ;" type="success"
                @click="updateDialogVisible = true; menuFrom = {}">新增<el-icon>
                    <FolderAdd />
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon title="确定要删除吗?"
                @confirm="deleteMenus()">
                <template #reference>
                    <el-button type="danger">批量删除<el-icon>
                            <Delete />
                        </el-icon></el-button>
                </template>
            </el-popconfirm>
        </div>
    </div>

    <!-- 主体部分 -->
    <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <!-- default-expand-all 默认打开全部 这里关了 -->
        <el-table :data="menus" style="width: 100%; margin-bottom: 20px" row-key="id" :border="true"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" />
            <el-table-column prop="id" label="ID" width="60px" />
            <el-table-column prop="name" label="名称" sortable width="150px" />
            <el-table-column prop="path" label="路径" />
            <el-table-column label="图标" align="center" width="60px">
                <template #default="scope">
                    <component :is="scope.row.icon" style="height: 20px;"></component>
                </template>
            </el-table-column>
            <el-table-column prop="vuePage" label="页面" />
            <el-table-column prop="pid" label="父级" />
            <el-table-column property="options" label="options" width="316px">
                <template #default="scope">
                    <el-button type="primary" v-if="scope.row.pid === null"
                        @click="addChildrenMenu(scope.row)">新增子菜单<el-icon>
                            <Menu></Menu>
                        </el-icon>
                    </el-button>
                    <el-button type="warning" @click="EditMenu(scope.row)">编辑<el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :hide-after=100 hide-icon
                        title="确定要删除吗?" @confirm="deleteMenu(scope.row.id)">
                        <template #reference>
                            <el-button type="danger">删除<el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <!-- 分页查询 -->
    <!-- <div style=" margin: 10px 0 0 20px;padding-right: 20px;">
        <el-pagination v-model:current-page="pageInfo.current" v-model:page-size="pageInfo.pageSize" :total="pageInfo.total"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" @size-change="getMenus()"
            @current-change="getMenus()" />
    </div> -->

    <!-- 新增和编辑 弹出对话框 -->
    <el-dialog v-model="updateDialogVisible" title="新增用户" width="30%" :close-on-click-modal="false">
        <el-form label-width="80px" v-model="menuFrom">
            <el-form-item label="名称">
                <el-input v-model="menuFrom.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="menuFrom.path" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="icon">
                <el-select v-model="menuFrom.icon" placeholder="Select" size="large">
                    <el-option v-for="icon in menuIcons" :key="icon" :value="icon.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="页面">
                <el-input v-model="menuFrom.vuePage" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父项">
                <el-input v-model="menuFrom.pid" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="save()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 新增子菜单 -->
    <el-dialog v-model="menuDialogVisible" title="分配菜单" width="30%" :close-on-click-modal="false">
        <el-form label-width="80px" v-model="menuFrom">
            <el-form-item label="名称">
                <el-input v-model="menuFrom.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="menuFrom.path" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="icon">
                <el-select v-model="menuFrom.icon" placeholder="Select" size="large">
                    <el-option v-for="icon in menuIcons" :key="icon" :value="icon.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="页面">
                <el-input v-model="menuFrom.vuePage" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="menuDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="menuDialogVisible = false; save()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped></style>